<!-- 使用例子：
<pb-upload :list.sync="imgList" :uploadFileFun="uploadFileFun"></pb-upload> 

//上传图片
async uploadFileFun() {
	let res = {
		"code": 200,
		"data": {}
	}
	//接口上传图片
	await xxxxx(url).then(data => {
		res.code = 200
		res.data = {
			"url":"https://高清图.jpg",
			"thumba_url": "https://缩略图.jpg"
		}
	}).catch(() => {
		res.code = -1
		res.data = {}
	})
	return res
},

-->


<template>
	<view>
		<u-upload :fileList="imageList" :accept="accept" @afterRead="afterRead" @delete="deletePic" name="1" multiple
			:maxCount="maxCount" :capture="capture" :width="width" :height="height">
			<slot>
				<view :style="'width: '+width+';height: '+height+';'" class="pb-flex-column pb-main-center pb-cross-center upload-btn">
					<u-icon name="camera-fill" size="26" color="#D3D4D6"></u-icon>
				</view>
			</slot>
		</u-upload>
	</view>
</template>

<script>
	export default {
		name: "pb-upload",
		props: {
			list: {
				type: Array,
				require: true,
				default: () => []
			},
			accept: {
				type: String,
				require: false,
				default: 'image' //image|video (微信小程序支持all|media,h5支持file)
			},
			name: {
				type: String,
				require: false,
				default: '1' //标识符
			},
			maxCount: {
				type: Number,
				require: false,
				default: 9
			},
			capture: {
				type: [String, Array],
				require: false,
				default: () => ['album', 'camera'] //当accept为image类型时设置capture可选额外camera可以直接调起摄像头
			},
			resourceFolder: {
				type: String,
				require: false,
				default: '' //默认放在服务器根目录的upload文件夹内，如果传了resourceFolder，文件目录会是upload/${resourceFolder}/yyyy/MM/dd/.....jpg
			},
			uploadFileFun: {
				type: Function,
				require: true
			},
			width: {
				type: String,
				default: '160rpx'
			},
			height: {
				type: String,
				default: '160rpx'
			}
		},
		data() {
			return {
				imageList: [], //{type:'image',size: 258565,name:'',status:'success',message:'',url:'',thumb:''}
			};
		},
		watch: {
			list: {
				handler(newVal) {
					this.imageList = newVal
				},
				immediate: true
			}
		},
		options: {
			styleIsolation: 'shared' // 解除样式隔离(解决在子组件中使用deep修改第三方样式失效的问题)
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this.imageList.splice(event.index, 1)
				this.$emit('update:list', this.imageList.filter(item => item.status == 'success'))
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				// console.log('afterRead =' + JSON.stringify(event.file))
				let lists = [].concat(event.file)
				let fileListLen = this.imageList.length
				lists.map((item) => {
					this.imageList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})

				for (let i = 0; i < lists.length; i++) {
					let item = this.imageList[fileListLen]
					if (this.uploadFileFun && typeof(this.uploadFileFun) === 'function') {
						let res = await this.uploadFileFun.call(uni.$u.$parent.call(this), item.url)
						// {
						// 	"code": 200,
						// 	"data": {
						// 		"url":"https://高清图.jpg",
						// 		"thumba_url": "https://缩略图.jpg"
						// 	}
						// }
						if ((res.code == 0 || res.code == 200) && res.data && res.data.url) {
							this.imageList.splice(fileListLen, 1, Object.assign(item, {
								status: 'success',
								message: '',
								url: res.data.url,
								thumb: res.data['thumba_url']
							}))
						} else {
							this.imageList.splice(fileListLen, 1, Object.assign(item, {
								status: 'failed',
								message: '上传出错',
							}))
						}
						fileListLen++
					} else {
						uni.showToast({
							icon: 'none',
							title: '父组件请实现 getCityData 方法，以便获取地址信息'
						})
					}
				}
				this.$emit('update:list', this.imageList.filter(item => item.status == 'success'))
			},
		}
	}
</script>

<style lang="scss">
	.upload-btn {
		background-color: rgb(244, 245, 247);
		border-radius: 8rpx;
	}

	//上传图片中间的按钮
	/* #ifndef VUE3 */
	/deep/ .uicon-camera-fill {
		font-size: 60rpx !important;
	}

	//删除图片容器|图片上传状态去容器
	/deep/ .u-upload__deletable,
	/deep/ .u-upload__success {
		width: 32rpx !important;
		height: 32rpx !important;
	}

	//删除图片|图片上传状态按钮
	/deep/ .uicon-close,
	/deep/ .uicon-checkmark {
		width: 28rpx !important;
		height: 24rpx !important;
		font-size: 32rpx !important;
	}

	//长传中圆圈进度
	/deep/ .u-loading-icon__spinner--circle {
		width: 32rpx !important;
		height: 32rpx !important;
	}

	//上传出错图标
	/deep/ .uicon-close-circle {
		font-size: 40rpx !important;
		line-height: 50rpx !important;
	}

	// 上传中
	/deep/ .u-upload__status__message {
		font-size: 24rpx !important;
	}

	//图片间间距
	/deep/ .u-upload__wrap__preview {
		margin: 0 12rpx 12rpx 0;
	}

	/* #endif */
	/* #ifdef VUE3 */
	:deep(.uicon-camera-fill) {
		font-size: 60rpx !important;
	}

	//删除图片容器|图片上传状态去容器
	:deep(.u-upload__deletable),
	:deep(.u-upload__success) {
		width: 32rpx !important;
		height: 32rpx !important;
	}

	//删除图片|图片上传状态按钮
	:deep(.uicon-close),
	:deep(.uicon-checkmark) {
		width: 28rpx !important;
		height: 24rpx !important;
		font-size: 32rpx !important;
	}

	//长传中圆圈进度
	:deep(.u-loading-icon__spinner--circle) {
		width: 32rpx !important;
		height: 32rpx !important;
	}

	//上传出错图标
	:deep(.uicon-close-circle) {
		font-size: 40rpx !important;
		line-height: 50rpx !important;
	}

	// 上传中
	:deep(.u-upload__status__message) {
		font-size: 24rpx !important;
	}

	//图片间间距
	:deep(.u-upload__wrap__preview) {
		margin: 0 12rpx 12rpx 0;
	}

	/* #endif */
</style>